<template>
  <div class="home">

    <!--    功能区域-->
    <div style="margin: 10px 20px">
      <el-button type="primary" @click="add">添加</el-button>
      <el-button type="primary">导入</el-button>
      <el-button type="primary" @click="exports">导出</el-button>
      <el-input v-model="search" placeholder="请输入关键字" style="width: 20%; margin-left:50px;" clearable/>
      <el-button type="primary" style="margin-left: 10px" @click="load">查询</el-button>

    </div>
    <!--    搜索区域-->
    <!--    <div style="margin: 20px">-->
    <!--      <el-input v-model="search" placeholder="请输入关键字" style="width: 20%;"/>-->
    <!--    </div>-->

    <!--    表格-->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="普通员工管理" name="first">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="ID" width="120"/>
          <!--      <el-table-column fixed prop="date" label="日期" width="150" sortable/>-->
          <el-table-column prop="username" label="用户名" width="120"/>
          <el-table-column prop="name" label="姓名" width="120"/>
          <el-table-column prop="phone" label="电话" width="120"/>
          <el-table-column prop="sex" label="性别" width="120"/>
          <el-table-column prop="address" label="地址" width="500"/>
          <el-table-column label="角色">
            <template #default="scope">
              <span v-if="scope.row.role === 1">管理员</span>
              <span v-if="scope.row.role === 2">机构合伙人</span>
              <span v-if="scope.row.role === 3">老师</span>
              <span v-if="scope.row.role === 4">前台</span>
            </template>
          </el-table-column>
          <!--      <el-table-column prop="zip" label="Zip" width="120" />-->
          <el-table-column fixed="right" label="操作" width="120">
            <template #default="scope">
              <el-button type="text" size="large" @click="handleEdit(scope.row)">编辑</el-button>
              <el-popconfirm title="确认删除吗?" @confirm="handleDelete(scope.row.id)">
                <template #reference>
                  <el-button type="text" size="large">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="教师管理" name="second">
        <el-table :data="tableData_teacher" style="width: 100%">
          <el-table-column prop="id" label="ID" width="80"/>
          <el-table-column prop="username" label="用户名" width="120"/>
          <el-table-column prop="name" label="姓名" width="120"/>
          <el-table-column prop="phone" label="电话" width="120"/>
          <el-table-column prop="sex" label="性别" width="120"/>
          <el-table-column prop="teachKinds" label="舞种" width="120"/>
          <el-table-column prop="image" label="图片" width="150">
            <template #default="scope">
              <el-image
                  style="width: 150px; height: 100px"
                  :src="scope.row.image"
                  :preview-src-list="[scope.row.image]">
              </el-image>
            </template >
          </el-table-column>
          <el-table-column prop="details" label="介绍" width="350"/>
          <el-table-column fixed="right" label="操作" width="120">
            <template #default="scope">
              <el-button type="text" size="large" @click="handleEdit_teacher(scope.row)">编辑</el-button>
              <el-popconfirm title="确认删除吗?" @confirm="handleDelete(scope.row.id)">
                <template #reference>
                  <el-button type="text" size="large">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>


    <!--    弹出框-->
    <el-dialog v-model="dialogVisible" title="提示" width="30%">
      <!--      <span>This is a message</span>-->
      <el-form :model="form" label-width="120px">
        <el-form-item label="用户名">
          <el-input v-model="form.username" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="form" label-width="120px">
        <el-form-item label="姓名">
          <el-input v-model="form.name" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="form" label-width="120px">
        <el-form-item label="电话">
          <el-input v-model="form.phone" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="form" label-width="120px">
        <el-form-item label="性别">
          <el-radio v-model="form.sex" label="男">男</el-radio>
          <el-radio v-model="form.sex" label="女">女</el-radio>
        </el-form-item>
      </el-form>
      <el-form :model="form" label-width="120px">
        <el-form-item label="角色">
          <el-select v-model="form.role" placeholder="请选择">
            <el-option v-for="item in role" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form :model="form" label-width="120px">
        <el-form-item label="地址">
          <el-input type="textarea" v-model="form.address" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>

      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </span>
      </template>
    </el-dialog>

    <el-dialog v-model="dialogVisible_teacher" title="提示" width="30%">
      <!--      <span>This is a message</span>-->
      <el-form :model="form" label-width="120px">
        <el-form-item label="用户名">
          <el-input v-model="form.username" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="form" label-width="120px">
        <el-form-item label="姓名">
          <el-input v-model="form.name" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="form" label-width="120px">
        <el-form-item label="电话">
          <el-input v-model="form.phone" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="form" label-width="120px">
        <el-form-item label="性别">
          <el-radio v-model="form.sex" label="男">男</el-radio>
          <el-radio v-model="form.sex" label="女">女</el-radio>
        </el-form-item>
      </el-form>
      <el-form :model="form" label-width="120px">
        <el-form-item label="舞种">
          <el-select v-model="form.teachKinds" placeholder="请选择">
            <el-option v-for="item in teachKinds" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form :model="form" label-width="120px">
        <el-form-item label="图片">
          <el-upload v-model="form.image" ref="upload" :on-success="uploadSuccess"
                     action="http://localhost:9090/files/upload" list-type="picture-card">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <el-form :model="form" label-width="120px">
        <el-form-item label="介绍">
          <el-input type="textarea" v-model="form.details" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>

      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible_teacher = false">取消</el-button>
        <el-button type="primary" @click="save_teacher">确定</el-button>
      </span>
      </template>
    </el-dialog>

    <div class="demo-pagination-block">
      <!--      <span class="demonstration">All combined</span>-->
      <el-pagination
          v-model:currentPage="currentPage4"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>


import request from "@/utils/request";

export default {
  name: 'Home',
  components: {},


  data() {
    return {
      search: '',
      form: {},
      dialogVisible: false,
      dialogVisible_teacher:false,
      tableData: [],
      currentPage4: 1,
      pageSize: 10,
      total: 0,
      activeName: 'first',
      tableData_teacher:[],
      imageSrc:'',
      role: [{
        value: '1',
        label: '管理员'
      }, {
        value: '2',
        label: '机构合伙人'
      }, {
        value: '3',
        label: '老师'
      }, {
        value: '4',
        label: '前台'
      }, {
        value: '5',
        label: '学员'
      }],
      value: '',
      teachKinds: [{
        value: 'Hip-Hop',
        label: 'Hip-Hop'
      }, {
        value: 'Breaking',
        label: 'Breaking'
      }, {
        value: 'Locking',
        label: 'Locking'
      }, {
        value: 'Waacking',
        label: 'Waacking'
      }, {
        value: 'Jazz',
        label: 'Jazz'
      },{
        value: 'Popping',
        label: 'Popping'
      }
      ],
    }
  },

  created() {
    this.load()
    this.table_teacher()
  },

  methods: {

    load() {
      this.tableData=[]
      request.get("/user", {
        params: {
          pageNum: this.currentPage4,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res => {
        console.log(res)
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    exports() {
      // let date;
      // this.goodslist.forEach(value => {
      //   date =value.date})
      // request.get("",{
      //   params:{
      //     date:date
      //   }
      // }).then(res1 =>{
      //   console.log(res1.data)
      //   if(res1.data!=null){
          location.href = "http://" + "localhost"+ ":9090/excel/export";
        // }
      // })

    },
      table_teacher() {
        request.get("/user", {
          params: {
            pageNum: this.currentPage4,
            pageSize: this.pageSize,
            search: this.search
          }
        }).then(res => {
          res.data.records.forEach(v=>{
            console.log(v.image+"qqqqqqqqq")
            if (v.role===3){
              this.tableData_teacher.push(v)
            }

          })
          console.log(res)
          this.total = res.data.total
        })


      },

    uploadSuccess(res) {
      console.log("图片啊啊啊啊")
      console.log(res)
      this.form.image =res.data;

    },
    handleEdit_teacher(row){
      this.form = JSON.parse(JSON.stringify(row))
      this.load();
      this.dialogVisible_teacher = true
      if (this.$refs['upload']) {
        this.$refs['upload'].clearFiles()  // 清除历史文件列表
      }


    },

    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true
    },

    add() {
      this.dialogVisible = true
      this.form = {}
    },
    save() {
      if (this.form.id) {
        request.put("/user", this.form).then(res => {
          console.log(res)
          if (res.code === '0') {
            this.$messageBox({
              type: "success",
              message: "更新成功"
            })
          } else {
            this.$messageBox({
              type: "error",
              message: res.msg
            })
          }
          this.load() //刷新表格的数据
          this.dialogVisible = false
          this.dialogVisible_teacher = false
        })
      } else {
        request.post("/user", this.form).then(res => {
          console.log(res)
          if (res.code === '0') {
            this.$messageBox({
              type: "success",
              message: "新增成功"
            })
          } else {
            this.$messageBox({
              type: "error",
              message: res.msg
            })
          }
          this.tableData_teacher() //刷新表格的数据
          this.dialogVisible = false
          this.dialogVisible_teacher = false
        })
      }
    },
    save_teacher() {
      this.tableData_teacher=[]
      if (this.form.id) {
        request.put("/user", this.form).then(res => {
          console.log(res)
          if (res.code === '0') {
            this.$messageBox({
              type: "success",
              message: "更新成功"
            })
          } else {
            this.$messageBox({
              type: "error",
              message: res.msg
            })
          }
          this.dialogVisible = false
          this.dialogVisible_teacher = false
          this.table_teacher();
        })
      } else {
        request.post("/user", this.form).then(res => {
          console.log(res)
          if (res.code === '0') {
            this.$messageBox({
              type: "success",
              message: "新增成功"
            })
          } else {
            this.$messageBox({
              type: "error",
              message: res.msg
            })
          }

          this.dialogVisible = false
          this.dialogVisible_teacher = false
          this.table_teacher();
        })
      }
    },
    handleDelete(id) {
      console.log(id)
      request.delete("/user/" + id).then(res => {
        if (res.code === '0') {
          this.$messageBox({
            type: "success",
            message: "删除成功"
          })
        } else {
          this.$messageBox({
            type: "error",
            message: res.msg
          })
        }
        this.load()
      })
    },
    handleSizeChange(pageSize) {     //改变当前每页的个数触发
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {  //改变当前页码触发
      this.currentPage4 = pageNum
      this.load()
    },
    // currentPage4() {
    // },
  },
}


</script>
